<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-form
            :inline="true"
            :model="listQuery"
            ref="dataList2"
            class="demo-form-inline"
          >
            <el-form-item label="">
              <el-input
                type="text"
                v-model.number="listQuery.user_id"
                placeholder="用户编号"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input
                type="text"
                v-model.number="listQuery.nickname"
                placeholder="用户昵称"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input
                type="text"
                v-model.number="listQuery.name"
                placeholder="道具名称"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-select
                @clear="listQuery.group_id = undefined"
                clearable
                filterable
                v-model="listQuery.group_id"
                placeholder="请选择类别"
              >
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="searchSubmit">查询</el-button>
              <el-button type="primary" @click="handleRsetSubmit"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </el-row>
      </div>
      <div class="item">
        <el-table
          ref="dataList"
          :data="menuList"
          row-key="id"
          border
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="id" width="70" label="ID"> </el-table-column>
          <el-table-column label="用户编号">
            <template slot-scope="{ row }">
              <p v-text="row.user_data && row.user_data.user_code"></p>
            </template>
          </el-table-column>
          <el-table-column prop="user_data.nickname" label="兑换人昵称">
            <template slot-scope="{ row }">
              <p v-text="row.user_data && row.user_data.nickname"></p>
            </template>
          </el-table-column>
          <el-table-column prop="reward_data" label="道具名称">
            <template slot-scope="{ row }">
              <p v-text="row.reward_data && row.reward_data.name"></p>
            </template>
          </el-table-column>
          <el-table-column prop="reward_data.type" label="类别">
            <template slot-scope="{ row }">
              <p v-if="row.reward_data && row.reward_data.type === 1">积分</p>
              <p v-if="row.reward_data && row.reward_data.type === 2">挂件</p>
              <p v-if="row.reward_data && row.reward_data.type === 3">坐骑</p>
              <p v-if="row.reward_data && row.reward_data.type === 4">特效</p>
              <p v-if="row.reward_data && row.reward_data.type === 5">金币</p>
              <p v-if="row.reward_data && row.reward_data.type === 6">礼物</p>
            </template>
          </el-table-column>
          <el-table-column prop="reward_data.picture" label="图片">
            <template slot-scope="{ row }">
              <el-popover placement="right" max-width="420" trigger="hover">
                <el-image
                  :src="row.reward_data && row.reward_data.picture"
                  alt=""
                  style="max-width: 200px;max-height: 200px"
                ></el-image>
                <el-image
                  slot="reference"
                  :src="row.reward_data && row.reward_data.picture"
                  alt=""
                  style="width: 50px;"
                ></el-image>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="cost_score" label="积分"> </el-table-column>
          <el-table-column prop="add_time" label="兑换时间"> </el-table-column>
        </el-table>
        <!-- 分页 -->
        <cus-pagination
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.perPage"
          @pagination="getList"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { listData } from "@/api/rewardPoint/exchangeRecord";
export default {
  data() {
    return {
      // 要修改的当前行的id
      row_id: 0,
      menuList: [],
      limitList: [],
      listQuery: {
        page: 1,
        perPage: 10,
        user_id: undefined,
        nickname: undefined,
        name: undefined,
        group_id: undefined
      },
      total: 0,
      typeList: [
        { value: 1, label: "积分" },
        { value: 2, label: "挂件" },
        { value: 3, label: "坐骑" },
        { value: 4, label: "特效" },
        { value: 5, label: "金币" },
        { value: 6, label: "礼物" }
      ]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 点击查询
    searchSubmit() {
      this.listQuery.page = 1;
      this.getList();
    },
    // 点击重置
    handleRsetSubmit() {
      this.listQuery.page = 1;
      this.listQuery.perPage = 10;
      this.listQuery.user_id = undefined;
      this.listQuery.nickname = undefined;
      this.listQuery.name = undefined;
      this.listQuery.group_id = undefined;
      this.getList();
    },
    getList() {
      listData(this.listQuery).then(response => {
        this.menuList = response.data.data;
        this.total = response.data.total;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-table {
  width: 100%;
  margin-bottom: 20px;

  .el-image {
    text-align: center;
  }
}
</style>
